<template>
  <el-button
  :type="fld.btnType"
  :plain="fld.plain"
  :round="fld.round"
  :disabled="fld.disabled"
  :icon="fld.icon"
  :size="fld.size"
  @click="handleClick"
  >{{fld.text}}</el-button>
</template>
<script>
define(['vue'],function(vue){
  return vue.component('comp-button',{
    props : {
      fld :{required:false,default:function(){
        return {btnType:'primary',plain:false,round:false,size:'small',icon:'',text:'按钮',disabled:false}
      }},
    },
    template: template,
    methods:{
      handleClick :function(e){
        var key = this.fld.click || `${this.fld.name}:click`;
        if(!this.$root.callbacks[key]) {
          if(this.fld.click) {
            console.warn(`表单项中对${this.fld.name}定义了click方法:${this.fld.click},未在sontpl中发现对应的方法`);
          }
          return;
        }
        this.$root.callbacks[key].apply(this,arguments);
      },
    },
    mounted:function(){
      // dump('comp-button mounted fired',this.$root);
      var key = this.fld.on;
      if(key){
        var that = this;
        that.$bus.$on(key, function(data){
          that.$root.callbacks[key].apply(that,[data]);
        });
      }
    }
  });
});

</script>